<template>
  <el-container :style="{ height: $store.state.mainContainerHeight - 40 + 'px' }">
    <el-main>
      <el-divider>
        <el-switch
          v-if="goodsForm.formData.id"
          style="display: block"
          :value="goodsForm.formData.goodsStatus.name"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="$CONST.GOODS_STATUS.ON_SALE.name"
          :inactive-value="$CONST.GOODS_STATUS.OFF_SHELF.name"
          active-text="上架"
          inactive-text="下架"
          name="name"
          @change="onStatusChange"
        >
        </el-switch>
      </el-divider>
      <el-form
        ref="form"
        label-width="180px"
        :model="goodsForm.formData"
        :rules="goodsForm.rules"
      >
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-form-item
              label="商品名"
              prop="name"
            >
              <el-input
                style="width: 220px"
                placeholder="商品名"
                v-model.trim="goodsForm.formData.name"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>

               <el-form-item
              label="一般回单天数"
              prop="returnDay"
            >
              <el-input-number
                style="width: 220px"
                :min="1"
                :max="999"
                :step="1"
                v-model.trim="goodsForm.formData.returnDay"
              ></el-input-number>
            </el-form-item>

            <el-form-item
              label="状态"
              prop="goodsStatus"
            >
              <el-select
                v-model="goodsForm.formData.goodsStatus"
                value-key="name"
                placeholder="状态"
              >
                <el-option
                  v-for="(item, key) in $CONST.GOODS_STATUS"
                  :key="key"
                  :label="item.title"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="商品类型"
              prop="goodsType"
            >
              <el-select
                v-model="goodsForm.formData.goodsType"
                value-key="name"
                clearable
                placeholder="类型"
              >
                <el-option
                  v-for="(item, key) in $CONST.GOODS_TYPE"
                  :key="key"
                  :label="item.title"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="商品分类"
              prop="category"
            >
              <el-select
                v-model="goodsForm.formData.goodsCategory"
                placeholder="请选择"
                filterable
                clearable
                value-key="id"
                :loading="selectLoading"
                @focus="getCategorySelect"
              >
                <el-option
                  v-for="item in categorys"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
              <div class="tips">不选则为默认等级</div>
            </el-form-item>

            <el-form-item
              label="基础价格"
              prop="price"
            >
              <el-input-number
                style="width: 220px"
                :min="0.01"
                :max="99999.99"
                :precision="2"
                :step="0.01"
                v-model.trim="goodsForm.formData.price"
              ></el-input-number>
            </el-form-item>

            <template v-if="isGalleryGoods">
              <el-form-item
                label="超过默认数量单张价格"
                prop="overPrice"
              >
                <el-input-number
                  style="width: 220px"
                  :min="0.01"
                  :max="99999.99"
                  :precision="2"
                  :step="0.01"
                  v-model.trim="goodsForm.formData.overPrice"
                ></el-input-number>
              </el-form-item>
              <el-form-item
                label="最大数量"
                prop="maxCount"
              >
                <el-input-number
                  style="width: 220px"
                  :min="1"
                  :max="9999"
                  :step="1"
                  v-model.trim="goodsForm.formData.maxCount"
                ></el-input-number>
              </el-form-item>
            </template>

            <template v-if="qiniuConfig.token">
              <el-form-item label="商品图">
                <single-file-uploader
                  :drag="false"
                  ref="imgUploader"
                  :data="{
                    key: uploadKey,
                    token: qiniuConfig.token,
                    domain: qiniuConfig.domain,
                  }"
                  :domain="qiniuConfig.domain"
                  :action="qiniuConfig.uploadUrl"
                  :filePath.sync="goodsForm.formData.thumb"
                  :fileSuffixs="['jpg', 'png']"
                >
                  <el-image
                    fit="contain"
                    v-if="goodsForm.formData.thumb"
                    class="thumb"
                    :preview-src-list="[goodsForm.formData.thumb]"
                    :src="goodsForm.formData.thumb"
                  >
                    <div
                      slot="placeholder"
                      v-loading="true"
                      element-loading-text="图片加载中..."
                      class="image-slot thumb"
                    ></div>
                    <div
                      slot="error"
                      class="image-slot thumb"
                    >
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <template
                    v-slot:extra
                    v-if="goodsForm.formData.thumb"
                  >
                    <el-button
                      @click="$refs.imgUploader.deleteFile()"
                      type="text"
                      size="default"
                      icon="el-icon-delete"
                    >删除图片</el-button>
                    重新上传
                  </template>
                </single-file-uploader>
              </el-form-item>
              <el-form-item label="商品视频">
                <single-file-uploader
                  ref="videoUploader"
                  :data="{
                    key: uploadKey,
                    token: qiniuConfig.token,
                    domain: qiniuConfig.domain,
                  }"
                  :domain="qiniuConfig.domain"
                  :action="qiniuConfig.uploadUrl"
                  :filePath.sync="goodsForm.formData.video"
                  accept="video/mp4,video/webm,video/ogg"
                  :fileSuffixs="['mp4','ogg','webm']"
                >
                  <video
                    v-if="goodsForm.formData.video"
                    width="80%"
                    height="100%"
                    :src="goodsForm.formData.video"
                    controls="controls"
                  >
                    您的浏览器不支持 video 标签。
                  </video>
                  <template
                    v-slot:extra
                    v-if="goodsForm.formData.video"
                  >
                    <el-button
                      @click="$refs.videoUploader.deleteFile()"
                      type="text"
                      size="default"
                      icon="el-icon-delete"
                    >删除视频</el-button>
                    重新上传
                  </template>
                </single-file-uploader>
              </el-form-item>
            </template>
          </el-tab-pane>
          <el-tab-pane :label="
              '影楼及等级价格管理[' +
              (goodsForm.formData.prices.length || 0) +
              ']'
            ">
            <div style="padding: 10px 0; font-size: 12px; color: #555">
              一般单价：¥{{ goodsForm.formData.price }}
            </div>
            <div
              :key="index"
              class="inline-group"
              v-for="(item, index) in goodsForm.formData.prices"
            >
              <el-form-item
                :prop="'prices.' + index + '.type'"
                :rules="{
                  required: true,
                  message: '请选择类型',
                  trigger: 'change',
                }"
              >
                <el-select
                  style="width: 150px"
                  v-model="item.type"
                  value-key="name"
                  placeholder="类型"
                  :disabled="item.id > 0"
                  @change="onPriceTypeChange(index)"
                >
                  <el-option
                    v-for="t in $CONST.GOODS_PRICE_TYPE"
                    :key="t.name"
                    :label="t.title"
                    :value="t"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <template v-if="item.id">
                <el-form-item>
                  <el-input
                    style="width: 150px"
                    :value="
                      goodsForm.formData.prices[index].type.name ===
                      $CONST.GOODS_PRICE_TYPE.PHOTO_STUDIO_LEVEL.name
                        ? goodsForm.formData.prices[index].level.name
                        : goodsForm.formData.prices[index].photoStudio.name
                    "
                    :disabled="true"
                  >
                  </el-input>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item
                  v-if="goodsForm.formData.prices[index].type"
                  :prop="'prices.' + index + '.targetId'"
                  :rules="{
                    required: true,
                    message: '请选择对象',
                    trigger: 'change',
                  }"
                >
                  <el-select
                    v-model="item.targetId"
                    :placeholder="
                      '影楼' + goodsForm.formData.prices[index].type.name ===
                      $CONST.GOODS_PRICE_TYPE.PHOTO_STUDIO_LEVEL.name
                        ? '等级'
                        : ''
                    "
                    filterable
                    clearable
                    value-key="id"
                    :loading="selectLoading"
                    @focus="getTargetSelect(index, item.type)"
                  >
                    <el-option
                      v-for="t in targets[index]"
                      :key="t.id"
                      :label="t.name"
                      :value="t.id"
                      :disabled="t.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>

              <el-form-item
                label="价格"
                :prop="'prices.' + index + '.price'"
              >
                <el-input-number
                  style="width: 180px"
                  :min="0.01"
                  :max="99999.99"
                  :precision="2"
                  :step="1"
                  v-model="item.price"
                ></el-input-number>
              </el-form-item>
              <el-button
                type="danger"
                @click="onRemovePrice(index)"
              >删除</el-button>
            </div>
            <el-form-item>
              <el-button @click="addPrice">新增价格</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane :label="
              '商品属性[' + (goodsForm.formData.attributes.length || 0) + ']'
            ">
            <div
              :key="index"
              class="inline-group"
              v-for="(item, index) in goodsForm.formData.attributes"
            >
              <template v-if="item.id">
                <el-form-item>
                  <el-input
                    style="width: 150px"
                    :value="goodsForm.formData.attributes[index].name"
                    :disabled="true"
                  >
                  </el-input>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item
                  label="属性名"
                  :prop="'attributes.' + index + '.name'"
                  :rules="{
                    required: true,
                    message: '请选择属性',
                    trigger: 'change',
                  }"
                >
                  <el-select
                    allow-create
                    default-first-option
                    v-model="item.name"
                    placeholder="属性"
                    filterable
                    clearable
                    value-key="name"
                    :loading="selectLoading"
                    @focus="getAttributeSelect(index)"
                  >
                    <el-option
                      v-for="t in attributes[index]"
                      :key="t.id"
                      :label="t.name"
                      :value="t.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <el-button
                type="success"
                @click="addAttributeValue(index)"
              >添加属性值</el-button>
              <el-button
                type="danger"
                @click="onAttributeRemove(index)"
              >删除属性</el-button>
              <div
                style="margin-left: 60px"
                :key="idx"
                v-for="(val, idx) in item.values"
              >
                <el-form-item
                  label="属性值"
                  :prop="'attributes.' + index + '.values.' + idx + '.name'"
                >
                  <el-input
                    style="width: 180px"
                    placeholder="属性值"
                    v-model.trim="val.name"
                    maxlength="50"
                    show-word-limit
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="加价"
                  :prop="'attributes.' + index + '.values.' + idx + '.price'"
                >
                  <el-input-number
                    style="width: 180px"
                    :min="0"
                    :max="99999.99"
                    :precision="2"
                    :step="1"
                    v-model="val.price"
                  ></el-input-number>
                </el-form-item>

                <el-button
                  type="danger"
                  @click="onAttributeValueRemove(index, idx)"
                >删除</el-button>
              </div>
            </div>
            <el-form-item>
              <el-button @click="addAttribute">新增属性</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane
            :disabled="!goodsForm.formData.goodsType"
            :label="
              '图片规格[' + (goodsForm.formData.photoSpecs.length || 0) + ']'
            "
          >
            <div style="padding: 10px 2px">
              <el-button
                type="text"
                @click="addPhotoSpecs"
              >添加图片规格</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                disabled
              >规格数
                {{ goodsForm.formData.photoSpecs.length || 0 }}</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                disabled
              >图片数
                {{
                  (goodsForm.formData.photoSpecs &&
                    goodsForm.formData.photoSpecs.reduce((p, n) => p + n.number, 0)) ||
                  0
                }}</el-button>
            </div>
            <photo-config-list
              @on-item-remove="onItemRemove"
              :data.sync="goodsForm.formData.photoSpecs"
            />
          </el-tab-pane>
          <el-tab-pane
            label="商品详情"
            :disabled="!qiniuConfig.token"
          >
            <squill-editor-qiniu
              v-if="qiniuConfig.token"
              :token="qiniuConfig.token"
              v-model="goodsForm.formData.description"
              :domain="qiniuConfig.domain"
              :data="{
                key: uploadKey,
                token: qiniuConfig.token,
                domain: qiniuConfig.domain,
              }"
              :uploadUrl="qiniuConfig.uploadUrl"
            ></squill-editor-qiniu>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-main>

    <el-footer>
      <el-row
        type="flex"
        justify="center"
      >
        <el-button
          style="margin-right: 100px"
          @click="gotoList"
          v-waves
        >返回</el-button>
        <el-button
          type="primary"
          :loading="goodsForm.loading"
          @click="onSubmit"
          v-waves
        >{{ this.goodsForm.loading ? "提交中" : "保存" }}</el-button>
      </el-row>
    </el-footer>

    <el-dialog
      @closed="addLoad = false"
      center
      title="添加图片规格"
      :visible.sync="dialogVisible"
      width="40%"
      @open="photoSpecsReset"
    >
      <el-form
        label-width="100px"
        :model="photoSpecsFormData"
        :rule="photoSpecsRules"
        ref="photoSpecsForm"
      >

        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input
            style="width:120px"
            v-model.trim="photoSpecsFormData.name"
            placeholder="名称"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="宽度-毫米"
          prop="width"
        >
          <el-input-number
            style="width: 120px"
            :min="1"
            :max="99999"
            :step="1"
            v-model.trim="photoSpecsFormData.width"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="高度-毫米"
          prop="height"
        >
          <el-input-number
            style="width: 120px"
            :min="1"
            :max="99999"
            :step="1"
            v-model.trim="photoSpecsFormData.height"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="DPI"
          prop="dpi"
        >
          <el-input-number
            style="width: 120px"
            :min="1"
            :max="99999"
            :step="1"
            v-model.trim="photoSpecsFormData.dpi"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="数量"
          prop="number"
        >
          <el-input-number
            style="width: 120px"
            :min="1"
            :max="isGalleryGoods ? goodsForm.formData.maxCount : 999"
            :step="1"
            v-model.trim="photoSpecsFormData.number"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="addLoad"
          @click="handleSpec"
        >确定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import categoryAPI from '@/api/goodsCategory'
import qiniuAPI from '@/api/qiniu'
import goodsAPI from '@/api/goods'
import studioAPI from '@/api/photoStudio'
import studioLevelAPI from '@/api/level'
import attributeAPI from '@/api/attribute'
import photoConfigList from '@/components/photo/photoConfigList'
import singleFileUploader from '@/components/uploader/singleFileUploader'
import { mapGetters } from 'vuex'
import SquillEditorQiniu from '@/components/quill-editor-qiniu.vue'
export default {
  props: ['id'],
  name: 'info',
  components: {
    photoConfigList,
    singleFileUploader,
    SquillEditorQiniu
  },
  data () {
    return {
      categorys: [],
      selectLoading: false,
      isUploading: false,
      addLoad: false,
      dialogVisible: false,
      fileList: [],
      targets: [],
      attributes: [],
      qiniuConfig: {
        token: null,
        uploadUrl: null,
        domain: null
      },
      goodsForm: {
        formData: {
          id: null,
          name: null,
          goodsType: null,
          goodsStatus: this.$CONST.GOODS_STATUS.OFF_SHELF,
          photoSpecs: [],
          prices: [],
          attributes: [],
          overPrice: 0.01,
          maxCount: 99,
          description: '',
          goodsCategory: null,
          returnDay: null
        },
        loading: false,
        rules: {
          goodsType: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
          maxCount: [
            { required: true, message: '请输入最大数量', trigger: 'blur' }
          ]
        }
      },
      photoSpecsFormData: {
        name: null,
        width: null,
        height: null,
        dpi: null,
        number: 0
      },
      photoSpecsRules: {
        width: [{ required: true, message: '请输入宽度', trigger: 'blur' }],
        height: [{ required: true, message: '请输入高度', trigger: 'blur' }],
        dpi: [{ required: true, message: '请输入DPI', trigger: 'blur' }],
        number: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      }
    }
  },
  async created () {
    qiniuAPI.getGoodsConfig().then((res) => {
      this.qiniuConfig = res.data
    })
    if (this.isEditMode) {
      const res = await goodsAPI.getById(this.id)
      this.goodsForm.formData = JSON.parse(JSON.stringify(res.data))
      await this.getCategorySelect()
    }
  },
  computed: {
    ...mapGetters(['token']),
    uploadKey () {
      return new Date().getTime() + '' + Math.floor(Math.random() * 1000)
    },
    isVirtualGoods () {
      return (
        this.goodsForm.formData.goodsType &&
        this.goodsForm.formData.goodsType.name ===
          this.$CONST.GOODS_TYPE.VIRTUAL.name
      )
    },
    isGalleryGoods () {
      return (
        this.goodsForm.formData.goodsType &&
        this.goodsForm.formData.goodsType.name ===
          this.$CONST.GOODS_TYPE.GALLERY.name
      )
    },
    isEditMode () {
      return this.id && this.id > 0
    },
    display () {
      return this.fileList &&
        Array.isArray(this.fileList) &&
        this.fileList.length > 0
        ? 'none'
        : 'inline-block'
    }
  },
  methods: {
    getCategorySelect (keyword) {
      if (this.goodsForm.formData.goodsCategory) {
        return
      }
      this.selectLoading = true
      categoryAPI
        .getAll(this.goodsForm.formData.factory.id, { showLoading: false })
        .then((res) => {
          this.categorys = res.data
          this.selectLoading = false
        })
        .catch((e) => {
          this.selectLoading = false
        })
    },
    getAttributeSelect (index) {
      if (this.goodsForm.formData.attributes[index].name) {
        return
      }
      this.selectLoading = true
      attributeAPI
        .getAll({ showLoading: false })
        .then((res) => {
          this.attributes[index] = res.data
        })
        .finally(() => {
          this.selectLoading = false
        })
    },
    addAttribute () {
      this.goodsForm.formData.attributes.push({
        name: null,
        values: [
          {
            name: null,
            price: 0
          }
        ]
      })
    },
    addAttributeValue (index) {
      this.goodsForm.formData.attributes[index].values.push({
        name: null,
        price: 0
      })
    },
    onAttributeValueRemove (index, idx) {
      this.goodsForm.formData.attributes[
        index
      ].values = this.goodsForm.formData.attributes[index].values.filter(
        (item, i) => i !== idx
      )
    },
    onAttributeRemove (index) {
      this.goodsForm.formData.attributes = this.goodsForm.formData.attributes.filter(
        (item, idx) => idx !== index
      )
    },
    onPriceTypeChange (index) {
      this.goodsForm.formData.prices[index].targetId = null
      this.targets = []
    },
    getTargetSelect (index, type) {
      if (this.goodsForm.formData.prices[index].targetId) {
        return
      }
      this.selectLoading = true
      if (type.name === this.$CONST.GOODS_PRICE_TYPE.PHOTO_STUDIO.name) {
        studioAPI
          .getAll({ showLoading: false })
          .then((res) => {
            this.targets[index] = res.data.map((item) => {
              item.disabled = !!this.goodsForm.formData.prices
                .filter((i) => i.type && i.type.name === type.name)
                .find((i) => i.targetId === item.id)
              return item
            })

            console.log('影楼', this.targets)
          })
          .finally(() => {
            this.selectLoading = false
          })
      } else {
        studioLevelAPI
          .getAll({ showLoading: false })
          .then((res) => {
            this.targets[index] = res.data.map((item) => {
              item.disabled = !!this.goodsForm.formData.prices
                .filter((i) => i.type && i.type.name === type.name)
                .find((i) => i.targetId === item.id)
              return item
            })
          })
          .finally(() => {
            this.selectLoading = false
          })
      }
    },
    addPrice () {
      this.goodsForm.formData.prices.push({
        price: 10,
        targetId: null,
        type: null
      })
    },
    onRemovePrice (index) {
      this.goodsForm.formData.prices = this.goodsForm.formData.prices.filter(
        (item, idx) => idx !== index
      )
    },
    onEditorBlur (quill) {},
    onEditorFocus (quill) {},
    onEditorReady (quill) {},
    onEditorChange ({ quill, html, text }) {
      this.content = html
    },
    onStatusChange (goodsStatus) {
      goodsAPI
        .updateStatus({ id: this.id, goodsStatus })
        .then((res) => {
          if (res.data) {
            this.goodsForm.formData.goodsStatus =
              goodsStatus === this.$CONST.GOODS_STATUS.ON_SALE.name
                ? this.$CONST.GOODS_STATUS.ON_SALE
                : this.$CONST.GOODS_STATUS.OFF_SHELF
          } else {
            this.goodsForm.formData.goodsStatus =
              goodsStatus === this.$CONST.GOODS_STATUS.ON_SALE.name
                ? this.$CONST.GOODS_STATUS.OFF_SHELF
                : this.$CONST.GOODS_STATUS.ON_SALE
          }
        })
        .catch(() => {
          this.goodsForm.formData.goodsStatus =
            goodsStatus === this.$CONST.GOODS_STATUS.ON_SALE.name
              ? this.$CONST.GOODS_STATUS.OFF_SHELF
              : this.$CONST.GOODS_STATUS.ON_SALE
        })
    },
    onItemRemove (index) {
      this.goodsForm.formData.photoSpecs = this.goodsForm.formData.photoSpecs.filter(
        (item, idx) => idx !== index
      )
      this.targets = this.targets.filter((item, idx) => idx !== index)
    },
    addPhotoSpecs () {
      if (
        this.isGalleryGoods &&
        this.goodsForm.formData.photoSpecs &&
        this.goodsForm.formData.photoSpecs.length > 0
      ) {
        this.$message.warning('相册商品只能添加一个规格')
      } else {
        this.dialogVisible = true
      }
    },
    handleSpec () {
      this.$refs.photoSpecsForm.validate((valid) => {
        if (valid) {
          this.goodsForm.formData.photoSpecs.push(
            Object.assign({}, this.photoSpecsFormData)
          )
          this.dialogVisible = false
        }
        this.addLoad = false
      })
    },
    photoSpecsReset () {
      this.$nextTick(() => {
        this.$refs.photoSpecsForm.resetFields()
      })
    },
    gotoList () {
      this.$router.pushTo(this.$router.routesConfig.goodsList)
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.goodsForm.loading = true

        if (this.id) {
          goodsAPI
            .update(this.goodsForm.formData)
            .then(() => {
              this.goodsForm.loading = false
              this.gotoList()
            })
            .catch(() => (this.goodsForm.loading = false))
        } else {
          goodsAPI
            .insert(this.goodsForm.formData)
            .then(() => {
              this.goodsForm.loading = false
              this.$message.success('添加商品成功')
              this.gotoList()
              // this.$refs.editForm.resetFields()
              // this.goodsForm.formData.thumbId = ''
              // this.goodsForm.formData.thumb = ''
              // this.$refs.uploader.clearFiles()
              // this.onImageRemove()
            })
            .catch(() => (this.goodsForm.loading = false))
        }
      })
    },
    onDelete () {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss">
.thumb {
  width: 150px;
  height: 150px;
  display: block;
}

.inline-group {
  .el-form-item {
    margin-right: 10px !important;
    display: inline-block;
    .el-form-item__label {
      width: auto !important;
    }

    .el-form-item__content {
      margin-left: 0 !important;
      display: inline-block;
    }
  }
}
</style>
